<script setup>

import {useRouter, useRoute} from "vue-router";

// 创建路由器对象
const router = useRouter()
// 当前路由对象
const route = useRoute()
console.log(route.params)

// 使用编程式路由
function f(param_id) {
  router.push({
    path: `/son1/${param_id}`
  })
}

function f1(param_id) {
  router.push({
    // params不能和path同时使用
    name: 'son1',
    params: {
      id: param_id
    }
  })
}


function f2(param_id, count) {
  router.push({
    path: `/son1/${param_id}`,
    query: {
      count
    }
  })
}


function f3(param_id, count) {
  router.push({
    name: 'son1',
    params: {
      id: param_id
    },
    query: {
      count
    },
  })
}


</script>

<template>
  <!--    动态路径参数-->
  <!--  声明式路由-->
  <!--  根据路径-->
  <RouterLink to="/son1/1">根据path：声明式路径参数</RouterLink>
  <br><br>
  <!--  根据名称-->
  <RouterLink :to="{name: 'son1', params: {id: 2}}">根据名称：声明式路径参数1</RouterLink>
  <br><br>
  <!--  携带请求参数-->
    <RouterLink to="/son1/1?count=1">根据path：声明式携带参数</RouterLink>
  <br><br>
  <RouterLink :to="{name: 'son1', params: {id: 2}, query: {count: 2}}">根据名称：声明式携带参数1</RouterLink>
  <br><br>
  <!--  编程式路由-->
  <!--  根据路径-->
  <button @click="f(1)">根据path：编程式路径参数</button>
  <br><br>
  <!--  根据名称-->
  <button @click="f1(2)">根据名称：编程式路径参数1</button>
  <br><br>
  <button @click="f2(1, 1)">根据path：编程式携带参数</button>
  <br><br>
  <button @click="f3(2, 2)">根据名称：编程式携带参数1</button>


  <RouterView/>
</template>

<style scoped>

</style>